<template>
    <div>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row>
                <el-col>
                    <el-button type="primary" @click="showAddDialog">添加分类</el-button>
                </el-col>
            </el-row>
            <zk-table :data="cateList" :columns="columns" :selection-type="false" :expand-type="false" show-index
                index-text="#" border stripe :show-row-hover="false">
                <template slot="isOk" slot-scope="scope">
                    <i v-if="scope.row.cat_deleted" class="el-icon-success" style="color: lightgreen;"></i>
                    <i v-else class="el-icon-error" style="color: red;"></i>
                </template>
                <template slot="order" slot-scope="scope">
                    <el-tag v-if="scope.row.cat_level===0" size="mini">一级</el-tag>
                    <el-tag v-else-if="scope.row.cat_level===1" type="success" size="mini">二级</el-tag>
                    <el-tag v-else type="warning" size="mini">三级</el-tag>
                </template>
                <template slot="operation" slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini"
                        @click="showEditDialog(scope.row)">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini"
                        @click="deleteCat(scope.row.cat_id)">删除</el-button>
                </template>

            </zk-table>
            <!-- 分页 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum" :page-sizes="[2, 5, 10, 20]" :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>
        <!-- 添加分类对话框 -->
        <el-dialog title="添加分类" :visible.sync="addDialogVisible" width="40%" @close="resetForm">
            <el-form :model="addForm" :rules="cateFormRules" ref="addFormRef" label-width="80px">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="addForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类">
                    <el-cascader v-model="selectKeys" :options="parentCateList" clearable :props="cascaderProps"
                        @change="parentCatChange">
                    </el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible=false">取 消</el-button>
                <el-button type="primary" @click="submitAddForm">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑分类对话框 -->
        <el-dialog title="编辑分类" :visible.sync="editDialogVisible" width="40%" @close="resetEditForm('editFormRef')">
            <el-form :model="editForm" :rules="cateFormRules" ref="editFormRef" label-width="80px">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="editForm.cat_name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible=false">取 消</el-button>
                <el-button type="primary" @click="submitEditForm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

export default {
    name: 'Category',
    data() {
        return {
            cateList: [],
            parentCateList: [],
            queryInfo: {
                type: 3,
                pagenum: 1,
                pagesize: 5
            },
            total: 0,
            // table列的定义
            columns: [
                {
                    label: '分类名称',
                    prop: 'cat_name',
                },
                {
                    label: '是否有效',
                    type: 'template',
                    template: 'isOk'
                },
                {
                    label: '排序',
                    type: 'template',
                    template: 'order'
                },
                {
                    label: '操作',
                    type: 'template',
                    template: 'operation',
                    width: '240px'
                },
            ],
            addDialogVisible: false,
            editDialogVisible: false,
            editForm: {cat_name: ''},
            addForm: {
                cat_name: '',
                cat_pid: 0,
                cat_level: 0
            },
            // 添加分类表单验证规则对象
            cateFormRules: {
                cat_name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                ]
            },
            // 级联选择器属性配置对象
            cascaderProps: {
                expandTrigger: 'hover',
                checkStrictly: true,
                value: 'cat_id',
                label: 'cat_name',
                children: 'children'
            },
            // 选中的父级id数组
            selectKeys: []
        }
    },
    created() {
        this.getCateList()
    },
    methods: {
        getCateList() {
            this.$http({
                url: 'categories',
                method: 'get',
                params: this.queryInfo
            }).then((res) => {
                // console.log(res);
                this.cateList = res.data.result
                this.total = res.data.total
            })
        },
        getParentCateList() {
            this.$http({
                url: 'categories',
                method: 'get',
                params: { type: 2 }
            }).then((res) => {
                this.parentCateList = res.data
                // console.log(res.data);
            })
        },
        handleSizeChange(newSize) {
            this.queryInfo.pagesize = newSize
            this.getCateList()
        },
        handleCurrentChange(newPage) {
            this.queryInfo.pagenum = newPage
            this.getCateList()
        },
        showAddDialog() {
            this.addDialogVisible = true
            this.getParentCateList()
        },
        parentCatChange() {
            if (this.selectKeys.length > 0) {
                // 父级分类的id
                this.addForm.cat_pid = this.selectKeys[this.selectKeys.length - 1]
                this.addForm.cat_level = this.selectKeys.length
            } else {
                this.addForm.cat_pid = 0
                this.addForm.cat_level = 0
            }
        },
        resetForm() {
            this.$refs['addFormRef'].resetFields();
            this.selectKeys = []
            this.addForm.cat_level = 0
            this.addForm.cat_pid = 0
        },
        submitAddForm() {
            // console.log(this.addForm);
            this.$refs.addFormRef.validate((valid) => {
                if (valid) {
                    this.$http({
                        url: 'categories',
                        method: 'post',
                        data: this.addForm
                    }).then((res) => {
                        if (res.meta.status === 201) {
                            this.$message.success(res.meta.msg)
                            this.addDialogVisible = false
                            this.getCateList()
                        }
                        else {
                            this.$message.error(res.meta.msg)
                        }
                    })
                }
            })
        },
        showEditDialog(row) {
            this.editDialogVisible = true
            this.editForm.cat_name = row.cat_name
            this.editForm.cat_id = row.cat_id
        },
        submitEditForm() {
            this.$refs.editFormRef.validate(valid => {
                if (valid) {
                    this.$http({
                        url: `categories/${this.editForm.cat_id}`,
                        method: 'put',
                        data: this.editForm
                    }).then((res) => {
                        this.$message.success(res.meta.msg)
                        this.editDialogVisible = false
                        this.getCateList()
                    }).catch(() => {
                        this.$message.error(res.meta.msg)
                    })
                }
            })
        },
        deleteCat(cat_id) {
            this.$confirm('此操作将永久删除该分类 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http({
                    url:'categories/'+cat_id,
                    method: 'delete'
                }).then((res) => {
                    this.$message.success(res.meta.msg)
                    this.getCateList()
                }).catch(error=>{
                    console.log(error);
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        resetEditForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
}
</script>

<style scoped lang="less">
.zk-table {
    margin-top: 15px;
}

.el-cascader {
    width: 100%;
}
</style>